import React, { useState, useEffect, useRef } from "react";
import styles from "./index.module.less";
import "./textlink.less";
import { Scrollbars } from "react-custom-scrollbars-2";
import { profile } from "@depjs/storage";
import formatChatDate from "@utils/formatChatDate";
import {
    selectItemNameShowChatHead,
    getChatMessageListAction,
} from "@redux/actions02";
import { connect } from "react-redux";
import translateUrl2Href from "@utils/translateUrl2Href";
import ContextMenu from "./contextMenu";
import { useParams } from "react-router-dom";

const ChatAreaMould = (props) => {
    const { id } = useParams();
    const { messageList, getChatMessageListAction } = props;
    const scrollRef = useRef(null);

    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [isDisplay, setIsDisplay] = useState(false);
    const [currentMessage, setCurrentMessage] = useState({});

    const remakePos = (e, message) => {
        const x = e.clientX;
        const y = e.clientY;
        setPosition({ x, y });
        setIsDisplay(true);
        setCurrentMessage(message);
    };

    useEffect(() => {
        id && getChatMessageListAction(id);
    }, [id, getChatMessageListAction]);

    useEffect(() => {
        document.body.onclick = function () {
            setIsDisplay(false);
        };
    }, []);

    useEffect(() => {
        let timer = null;
        timer = setTimeout(() => {
            scrollRef?.current?.scrollToBottom();
            clearTimeout(timer);
        });
    }, [messageList]);

    return (
        <div className={styles.chat_area_mould}>
            <Scrollbars autoHide ref={scrollRef}>
                <ul className={styles.chat_area_ul}>
                    {messageList.map((item, index) => {
                        return (
                            <li
                                key={index}
                                className={
                                    item.messageType === "DATE"
                                        ? ""
                                        : item.from.userName ===
                                          profile.userName
                                        ? styles.rig
                                        : styles.left
                                }
                            >
                                {item.messageType === "DATE" ||
                                item.isRecalled ? null : (
                                    <div className={styles.avatar}>
                                        {
                                            <img
                                                src={require(`@images/head/${item.from.avatarUrl}`)}
                                                alt=""
                                            />
                                        }
                                    </div>
                                )}
                                {item.isRecalled ? (
                                    <p className={styles.recall}>
                                        {item.from.userName === profile.userName
                                            ? "你撤回了一条消息"
                                            : "对方撤回了一条消息"}
                                    </p>
                                ) : item.messageType === "DATE" ? (
                                    <p className={styles.date}>
                                        {formatChatDate(item.date)}
                                    </p>
                                ) : item.messageType === "BIGEMOJI" ? (
                                    <img
                                        src={item.content.url}
                                        alt=""
                                        onContextMenu={(e) => {
                                            remakePos(e, item, index);
                                        }}
                                    />
                                ) : item.messageType === "TEXT" ? (
                                    <p
                                        className={styles.content}
                                        dangerouslySetInnerHTML={{
                                            __html: translateUrl2Href(
                                                item.content
                                            ),
                                        }}
                                        onContextMenu={(e) => {
                                            remakePos(e, item, index);
                                        }}
                                    ></p> // dangerouslySetInnerHTML把字符串转换为dom元素
                                ) : item.messageType === "IMAGE" ? (
                                    <span
                                        className={styles.big_img}
                                        dangerouslySetInnerHTML={{
                                            __html: item.content,
                                        }}
                                        onContextMenu={(e) => {
                                            remakePos(e, item, index);
                                        }}
                                    ></span>
                                ) : null}
                            </li>
                        );
                    })}
                </ul>
            </Scrollbars>
            <ContextMenu
                position={position}
                isDisplay={isDisplay}
                message={currentMessage}
            />
        </div>
    );
};

export default connect(
    (state) => ({
        messageList: state.chatMessageListReducer,
    }),
    { selectItemNameShowChatHead, getChatMessageListAction }
)(ChatAreaMould);
